<template>
    <view class="rx-select-disabled" v-if="disabled">
        {{disabledLabel}}
    </view>
    <view v-else class="rx-select-box">
        <div class="rx-select-multiple" @click.stop="inputActive">
            <span class="rx-select-placeholder" v-if="curValue.length === 0">{{ placeholder }}</span>
            <template v-else>
                <div class="rx-select-tag" v-for="(item,index) of curValue">
                    <span>{{ item[title] }}</span>
                    <span class="rx-select-close" v-if="!disabled" @click.stop="delTag(item,index)">
                    <my-icon type="icon-close"/>
                </span>
                </div>
            </template>
            <span class="rx-select-fold-icon" v-if="curValue.length === 0">
                <my-icon type="icon-icon-test40"/>
            </span>
            <span class="rx-select-fold-icon" v-else-if="clear" @click.stop="delAll">
                <my-icon type="icon-icon-test26"/>
             </span>
        </div>
    </view>
    <!-- 普通弹窗 -->
    <uni-popup ref="RxSelectPopup" background-color="#fff">
        <view class="rx-select-popup-content">
            <view class="search-input" v-if="search">
                <my-icon size="1rem" style="margin-right: 0.5rem" type="icon-Vue3_search"></my-icon>
                <input type="text" style="flex: 1" inputmode="search" v-model="searchValue" :placeholder="searchPlaceholder" @input="searchInput">
            </view>
            <view class="rx-select-searchOptions">
                <template v-for="item of searchOptions.length > 0 ?searchOptions:curOptions">
                    <div class="rx-options-item"
                         @click.stop="selectActive(item)"
                    >
                        <span class="rx-select-item-title" :class="[curValue.find(o=>o[field] === item[field])?'rx-select-item-hover':'']" v-html="item[title]"></span>
                        <span class="activeIcon" v-if="curValue.find(o=>o[field] === item[field])">
                        <my-icon type="icon-right"></my-icon>
                    </span>
                    </div>
                </template>
            </view>
        </view>
    </uni-popup>
</template>

<script>
import { debounce } from 'lodash-es' ;
import MyIcon from "../myIcon";
export default {
    name: "RxSelectBox",
    components: {MyIcon},
    props:{
        modelValue:{
            default:[]
        },
        title:{
            default:'label'
        },
        field:{
            default:'value'
        },
        options:{
            default:[]
        },
        /*是否可搜索*/
        search:{
            default:false
        },
        /*多选*/
        multiple:{
            default:true
        },
        /*清除全部按钮*/
        clear:{
            default:true
        },
        placeholder:{
            default:''
        },
        searchPlaceholder:{
            default:''
        },
        /*禁止*/
        disabled:{
            default:false
        }
    },
    emits:['change','update:modelValue'],
    data(){
        return {
            //选择的数据 [{label:'',value:''}]
            curValue:[],
            curOptions:[],
            searchOptions:[],
            searchStyle:{},
            searchValue:''
        }
    },
    computed:{
        disabledLabel(){
           let lable = []
            this.curValue.forEach(res=>{
                lable.push(res[this.title])
            })
            return lable.join(',')
        }
    },
    methods:{
        delAll(){
            this.curValue = [];
            this.$emit('update:modelValue',this.multiple?[]:'')
            this.$emit('change',this.multiple?[]:'')
        },
        inputActive(){
            this.$refs['RxSelectPopup'].open('bottom')
        },
        searchInput(e){
            let { value } = e.detail ;
            let self = this ;
            debounce(function (value) {
                self.searchOptions =  self.curOptions.filter(item=>item[self.title].includes(value))
            },500)(value)
        },
        change(data){
            this.$emit('change',data)
        },
        delTag(item,idx){
            this.del(idx)
            this.$emit('delTag',{...item});
        },
        del(idx){
            this.curValue.splice(idx,1)
            this.$emit('update:modelValue',this.curValue.map(o=>o[this.field]))
            this.change(this.curValue)
        },
        selectActive(item){
            let { field } = this ;
            if(this.multiple){
                //多选
                let idx = this.curValue.findIndex(o=>o[field] === item[field])
                if(idx > -1){
                    //如果存在则取消选择
                    this.del(idx)
                }else {
                    let _data = [...this.curValue,item]
                    this.$emit('update:modelValue',_data.map(o=>o[field]))
                    this.change(_data)
                }
            }else {
                this.$refs['RxSelectPopup'].close()
                //单选
                this.$emit('update:modelValue',item[field]);
                this.change(item)
            }
        },
        initOptions(){
            if(!this.modelValue || this.modelValue.length === 0){
                this.curValue = []
            }else if(typeof this.modelValue === "string" || !this.multiple){
                this.curValue = this.options.filter(item=>this.modelValue === item[this.field])
            }else {
                this.curValue = this.options.filter(item=>this.modelValue.includes(item[this.field]))
            }
        },
    },
    watch:{
        options:{
            handler(val){
                this.curOptions = val ;
                this.initOptions()
            },
            deep:true,
            immediate:true
        },
        modelValue:{
            handler(val){
                if(this.options.length==0){
                    return
                }
                this.initOptions()
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style scoped>
.rx-select-placeholder{
    color: #c3c3c3;
}
.search-input{
    display: flex;
    border-radius: 0.5rem;
    border: 2px solid rgba(232, 232, 232, 1);
    height: 2rem;
    align-items: center;
    margin: 0.5rem;
    padding: 0rem 0.5rem;
}
.rx-select-popup-content{
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rx-select-searchOptions{
    flex: 1;
    max-height: 50vh;
    overflow: auto;
}
.rx-select-box{
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    border-radius: 4px;
    padding-left: 0.625rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    min-height: 2rem;
}
.rx-select-multiple{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 2rem;
    padding-right: 2.25rem;
    position: relative;
}
.rx-select-close{
    margin: 0.1rem 0rem 0rem 0.2rem;
}
.rx-select-close > i{
    font-size: 0.7rem;
    color: rgba(34, 34, 34, 1);
}
.rx-select-tag{
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    font-size: 0.9rem;
}


.rx-select-fold-icon i{
    font-size: 1rem;
    color:rgba(204, 204, 204, 1);
}
.rx-select-fold-icon{
    position: absolute;
    right:0rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 2.25rem;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.rx-options-item{
    display: flex;
    padding: .6rem 1rem;
    justify-content: space-between;
    overflow: hidden;

}
.rx-select-item-title{
    flex: 1;
    display: inline-flex;
    padding-right: .5rem;
}
.activeIcon{
    color: rgb(66, 133, 242);
}
.rx-select-item-hover{
    color: rgb(66, 133, 242);
}
.rx-select-disabled{
    background: rgba(245, 246, 249, 1);
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    border: none;
    min-height: 1rem;
}

</style>
